<template>
  <div class="project-configuration">
    <bread>
      <h1>项目配置</h1>
    </bread>
    <page-content isCard>
      <progress-part></progress-part>
      <section>
        <div class="section-header">
          <h1>经费开支范围</h1>
          <small>全校纵向项目与横向项目统一使用的开支范围</small>
        </div>
        <div class="section-content">
          <el-table stripe :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="zip" label="邮编">
            </el-table-column>
            <el-table-column prop="province" label="省份">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="dialogFormVisible2=true" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tr-operate">
            <el-button type="text" @click="dialogFormVisible2 = true">
              <i class="el-icon-circle-plus"></i>
              新增开支范围
            </el-button>
          </div>
        </div>
      </section>
      <section>
        <div class="section-header">
          <h1>项目相关附件</h1>
          <small>如合同模板、经费表、申请表格等</small>
        </div>
        <div class="section-content">
          <el-table stripe :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="zip" label="邮编">
            </el-table-column>
            <el-table-column prop="province" label="省份">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">预览</el-button>
                <el-button type="text" size="small">下载</el-button>
                <el-button type="text" size="small" @click="dialogFormVisible3=true">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tr-operate">
            <el-button type="text" @click="dialogFormVisible3 = true">
              <i class="el-icon-circle-plus"></i>
              新增项目附件
            </el-button>
          </div>
        </div>
      </section>
      <!-- 新增开支范围 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible2" width="30%">
        <el-form :model="form" label-width="80px" class="demo-ruleForm">
          <el-form-item label="开支名称">
            <el-input type="password" v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="最高占比">
            <el-input type="password" v-model="form.percent" auto-complete="off" suffix-icon="el-icon-date"></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增开支范围 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible3" width="30%">
        <el-form :model="form" label-width="80px" class="demo-ruleForm" size="small">
          <el-form-item label="附件名称">
            <el-input type="password" v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload
              class="upload-demo"
              action=""
              multiple
              :limit="3"
              :on-progress="onProgress"
              :on-error="onError"
              :class="{ hideUploadBtn: !uploadBtnVisible }">
              <el-button size="small" plain>上传附件</el-button>
              <span class="empty-file"><i class="el-icon-warning"></i>您还没有上传附件</span>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
        </div>
      </el-dialog>
    </page-content>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import Sortable from 'sortablejs';
import ProgressPart from './progress-part';
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 2,
        date: '2016-05-02',
        name: '==小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      radio: '1',
      editProcessDialog: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      form: {
        name: '',
        percent: '',
        desc: '',
      },
      formLabelWidth: 120,
      uploadBtnVisible: true,
      sortable: null,
    }
  },
  methods: {
    editProcess() {
      this.editProcessDialog = true;
      const self = this;
      this.$nextTick(() => {
        const table = document.querySelector('.sortableTable tbody');
        self.sortable = Sortable.create(table, {
          draggable: '.item',
          onEnd({ newIndex, oldIndex }) {
            const targetRow = self.tableData.splice(oldIndex, 1)[0]
            self.tableData.splice(newIndex, 0, targetRow)
          }
        })
      });
    },
    onProgress() {
      this.uploadBtnVisible = false;
    },
    onError() {
      this.uploadBtnVisible = true;
    },
    handleMove(index, type) {
      const targetIndex = index + type;
      if (targetIndex < 0 || targetIndex > this.tableData.length) {
        this.$message('不能移动了哦');
      } else {
        const targetRow = this.tableData.splice(index, 1)[0];
        this.tableData.splice(index + type, 0, targetRow);
        this.sortable.sort(this.tableData);
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'cant-move';
      } else {
        return 'item';
      }
    }
  },
  components: {
    draggable,
    ProgressPart,
  }
}
</script>
<style lang="scss" scoped>
@import '../common.scss';
// upload dialog
.hideUploadBtn /deep/ .el-upload--text {
  display: none;
}
.hideUploadBtn /deep/ ul {
  top: -6px;
  position: relative;
}
.empty-file {
  color: #F04134;
  font-size: 12px;
  margin-left: 10px;
}
</style>
